<template>
  <div class="login min-win-he">
    <div class="op-div"></div>
    <div
      class="container opacity-ling"
      :class="{'right-panel-active': isopacity}"
    >
      <!-- 登录 -->
      <div class="container__form container--signin">
        <div class="form">
          <h2 class="form__title">登录</h2>
          <input
            type="email"
            placeholder="账号"
            class="input"
            maxlength="11"
            :style="{'border': isemailError ? '#f62d2d 2px solid' : ''}"
            v-model="form.email"
            @focus="inptFocus"
          />
          <i
            class="el-icon-error email-error"
            v-show="isemailError"
          ></i>
          <input
            type="Password"
            placeholder="密码"
            maxlength="16"
            class="input"
            v-model="form.password"
            :style="{'border': ispasswordError ? '#f62d2d 2px solid' : ''}"
            @focus="inptFocus"
            @keyup.enter="SignIn"
          />
          <i
            class="el-icon-error password-error"
            v-show="ispasswordError"
          ></i>
          <!-- @keyup.13="SignIn" -->
          <button
            v-focus
            class="btn"
            @click.stop="SignIn"
            @keyup.enter="SignIn"
          >登录</button>
          <p
            class="link cursor-p"
            @click.stop="btnClck"
          >还没有账号？搞一个？</p>
        </div>
      </div>

      <!-- 注册 -->
      <div class="container__form container--signup">
        <div class="form">
          <h2 class="form__title">注册</h2>
          <input
            type="email"
            placeholder="账号"
            class="input"
            maxlength="11"
            v-model="form.email"
          />
          <input
            type="Password"
            placeholder="密码"
            class="input"
            maxlength="16"
            v-model="form.password"
          />
          <input
            type="Password"
            placeholder="确认密码"
            class="input"
            maxlength="16"
            v-model="form.password2"
          />
          <button class="btn">注册</button>
        </div>
      </div>

      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button
              class="btn"
              @click.stop="btnClck"
            >Sign In</button>
          </div>
          <div class="overlay__panel overlay--right">
            <p class="text-tixing">
              可以使用
            </p>
            <button
              class="btn"
              @click.stop="btnClck"
            >Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let loginJia = 0
export default {
  name: 'login',
  data() {
    return {
      isopacity: false,
      isemailError: false,
      ispasswordError: false,
      form: {
        email: '13456789123',
        password: '123',
        password2: '',
      },
    }
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      },
    },
  },
  /*  mounted () {
    document.querySelector('#btnlogin').onkeydown = function(e){
      console.log(e);
    }
    console.log(document.querySelector('#btnlogin').onkeypress);
  }, */
  destroyed() {
    loginJia = null
  },
  methods: {
    btnClck() {
      this.isopacity = !this.isopacity
      this.form = { email: '', password: '', password2: '' }
    },
    SignIn() {
      if (loginJia > 5) {
        this.$message.warning('请勿连续点击')
        loginJia = 0
        return
      }
      loginJia++
      if (this.form.email == '' || this.form.password == '') {
        this.$message.warning('请填写账号或密码')
        return
      }

      const pattern = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      if (!pattern.test(this.form.email)) {
        this.isemailError = true
        this.$message.warning('请输入正确的手机号')
        return
      }

      // 防抖
      this.setTi && clearTimeout(this.setTi)
      this.setTi = setTimeout(async () => {
        let result
        if (this.$route.query.mode) {
          result = await this.$http.host.post('/login/host', { email: this.form.email, password: this.form.password })
        } else {
          result = await this.$http.host.post('/login/music', { email: this.form.email, password: this.form.password })
        }
        if (result.success == 1) {
          // 保存cookie 时间3天
          this.$cookies.set('wy_Cookies', result.data[0].cookies, '3d')
          // 提交vuex
          this.$store.commit('getuserToken', result.data[0])
          // 判断没有系统账号
          if (!result.data[0].userinfo.email) {
            await this.routerEmail('需要绑定系统账号吗？')
          }
          if (!result.data[0].userinfo.wy_email) {
            await this.routerEmail('要绑定网易云账号吗？')
          }
          this.$router.go(-1)
        } else {
          this.$message.error(result.msg)
          this.isemailError = true
          this.ispasswordError = true
        }
        loginJia = 0
      }, 500)
    },
    SignUp() {
      this.$message.warning('暂停服务')
    },
    inptFocus() {
      this.isemailError = false
      this.ispasswordError = false
    },
    routerEmail(msg, tishi = '提示') {
      return new Promise((res, err) => {
        this.$confirm(msg, tishi, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            // 转跳到绑定页面
            this.$message.warning('暂停没有')
            this.$router.push({ path: '/' })
          })
          .catch(() => {
            res(true)
          })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  width: 100vw;
  height: 100vh;

  .op-div {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 2;
    opacity: 0.4;
    position: fixed;
  }

  .email-error {
    position: absolute;
    top: 131px;
    right: 50px;
    color: #f00;
  }

  .password-error {
    position: absolute;
    top: 193px;
    right: 50px;
    color: #f00;
  }
}
</style>
<style>
:root {
  /* COLORS */
  --white: #e9e9e9;
  --gray: #333;
  --blue: #0367a6;
  --lightblue: #008997;

  /* RADII */
  --button-radius: 0.7rem;

  /* SIZES */
  --max-width: 758px;
  --max-height: 420px;

  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.form__title {
  font-weight: 300;
  margin: 0;
  margin-bottom: 1.25rem;
}

.link {
  color: var(--gray);
  font-size: 12px;
  margin: 1.5rem 0;
  text-decoration: none;
}

.container {
  background-color: #fff;
  border-radius: var(--button-radius);
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  height: var(--max-height);
  max-width: var(--max-width);
  overflow: hidden;
  position: relative;
  width: 100%;
  top: 24%;
  left: 32%;
  z-index: 3;
}

.container__form {
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-in-out;
}

.container--signin {
  left: 0;
  width: 50%;
  z-index: 2;
}

.container.right-panel-active .container--signin {
  transform: translateX(100%);
  opacity: 0;
}

.container--signup {
  left: 0;
  opacity: 0;
  width: 50%;
  z-index: 1;
}

.container.right-panel-active .container--signup {
  animation: show 0.6s;
  opacity: 1;
  transform: translateX(100%);
  z-index: 5;
}

.container__overlay {
  height: 100%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  z-index: 100;
}

.container.right-panel-active .container__overlay {
  transform: translateX(-100%);
}

.overlay {
  /* background-color: var(--lightblue); */
  /* background: url('https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg'); */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: -100%;
  position: relative;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 200%;
}

.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay__panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 50%;
}

.overlay--left {
  transform: translateX(-20%);
}

.container.right-panel-active .overlay--left {
  transform: translateX(0);
}

.overlay--right {
  right: 0;
  transform: translateX(0);
}

.container.right-panel-active .overlay--right {
  transform: translateX(20%);
}

.btn {
  /* background-color: var(--blue); */
  background-image: linear-gradient(90deg, #a3a3a3 0%, #8e9194 74%);
  border-radius: 20px;
  border: none;
  color: var(--white);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}

.form > .btn {
  margin-top: 1.5rem;
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus {
  outline: none;
}

.form {
  /* background-color: var(--white); */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
  height: 100%;
  text-align: center;
}

.input {
  background-color: #f0f0f0;
  border: none;
  border-radius: 7px;
  padding: 0.9rem 0.9rem;
  margin: 0.5rem 0;
  width: 100%;
}

@keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }

  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}
</style>